<template>
  <div class="total1">
    <!-- 洗衣机 -->
    <div
      class="one"
      v-for="(item, index) in machineList"
      :key="index"
      @click="detailsClick(item)"
      @mouseover="mouseHover(index)"
      @mouseout="mouseOut(index)"
      ref="one"
    >
      <img
        :src="item.wash_machine_picture"
        :class="item.wash_machine_state == 3 ? 'img1-1' : 'img1'"
      />
      <div>编号：{{ item.wash_machine_code }}</div>
      <div class="delete" ref="delicon" @click.stop="open(item)">
        <i class="el-icon-circle-close delete-icon"></i>
      </div>
      <div class="zhezhao" v-if="item.wash_machine_state == 3">已停用</div>
    </div>
    <!-- 添加 -->
    <div class="one-add" @click="openDialog()">
      <i class="el-icon-circle-plus-outline addicon"></i>
    </div>
    <!-- 点击出现添加的模态框 -->
    <el-dialog
      title="添加洗衣机"
      :visible.sync="dialogFormVisible"
      width="600px"
    >
      <el-form :model="form">
        <!-- 头像 -->
        <div class="touxiangdiv">
          <div class="touxiang">
            <el-upload
              class="avatar-uploader"
              action="http://192.168.43.75/WashMachine/tuxiangdizhi"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-camera-solid"></i>
            </el-upload>
          </div>
        </div>

        <el-form-item
          label="洗衣房ID"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input :value="form.washhouse_id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item
          label="洗衣机标题"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input
            v-model="form.wash_machine_title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="洗衣机编号"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input
            v-model="form.wash_machine_code"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="洗衣机规格"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input
            v-model="form.wash_machine_specification"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="详细描述"
          :label-width="formLabelWidth"
          class="from-item"
        >
          <el-input
            type="textarea"
            :rows="2"
            v-model="form.miaoshu"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="queding">确定</el-button>
      </div>
    </el-dialog>
    <div>
      <!-- 点击出现详细信息的模态框 -->
      <el-dialog
        title="详细信息"
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="handleClose"
      >
        <div class="detail-content">
          <img :src="machineDetail.wash_machine_picture" class="img2" />
          <div class="content-right">
            <div class="text1">编号: {{ machineDetail.wash_machine_code }}</div>
            <div class="text1">
              标题: {{ machineDetail.wash_machine_title }}
            </div>
            <div class="text1">
              规格: {{ machineDetail.wash_machine_specification }}
            </div>
            <div class="text1">
              详细描述: {{ machineDetail.wash_machine_remarks }}
            </div>
            <div class="text1">
              安装时间: {{ machineDetail.wash_machine_install_time }}
            </div>
            <div class="text1">
              状态:
              {{ status }}
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <!-- <el-button type="primary" @click="openDialog()">编辑</el-button> -->
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import http from '../api';
export default {
  data() {
    return {
      machineList: [],
      dialogVisible: false,
      dialogFormVisible: false,
      machineDetail: {},
      form: {
        wash_machine_code: '',
        wash_machine_specification: '',
        wash_machine_title: '',
        wash_machine_remarks: 'wwwwww',
        washhouse_id: 0,
        founder_id: 0,
        wash_machine_picture: '',
      },
      formLabelWidth: '120px',
      // 图片上传
      imageUrl: '',
    };
  },
  computed: {
    status() {
      if (this.machineDetail.wash_machine_state == 0) {
        return '空闲';
      } else if (this.machineDetail.wash_machine_state == 1) {
        return '使用中';
      } else if (this.machineDetail.wash_machine_state == 3) {
        return '已停用';
      }
    },
  },
  mounted() {
    console.log(this.machineList);
    http
      .machineData({
        washhouse_id: this.$route.params.houseid,
      })
      .then((r) => {
        console.log(r.data.data);
        this.machineList = r.data.data;
      });
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      this.form.wash_machine_picture = res;
    },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === 'image/jpeg';
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!');
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!');
    //   }
    //   return isJPG && isLt2M;
    // },
    queding() {
      this.dialogFormVisible = false;
      console.log(this.$route.params.houseid);
      this.form.washhouse_id = this.$route.params.houseid;
      this.form.founder_id = sessionStorage.getItem('user-id');
      http.userWashMachine(this.form).then((r) => {
        console.log(r);
        this.machineList=r.data.data;
      });
    },

    //点击删除触发的事件
    open(item) {
      this.$confirm('此操作将删除该洗衣机, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          http
            .deleteMachine({
              wash_machine_id: item.wash_machine_id,
              wash_machine_state: 3,
              washhouse_id: item.washhouse_id,
            })
            .then((r) => {
              console.log(r.data.data);
              this.machineList = r.data.data;
              // location.reload();
              this.$message({
                type: 'success',
                message: '删除成功!',
              });
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    //鼠标离开
    mouseOut(index) {
      this.$refs.delicon[index].style.display = 'none ';
    },
    //鼠标悬浮
    mouseHover(index) {
      if (this.machineList[index].wash_machine_state == 3) {
        this.$refs.delicon[index].style.display = 'none';
      } else {
        this.$refs.delicon[index].style.display = 'block';
      }
    },
    openDialog(item) {
      this.dialogFormVisible = true;
      this.dialogVisible = false;
    },
    //点击显示详细信息
    detailsClick(item) {
      this.dialogVisible = true;
      this.machineDetail = item;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.addicon {
  font-size: 100px;
  color: gray;
}
.one-add {
  width: 19%;
  height: 270px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 80px;
}
.zhezhao {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: rgb(194, 192, 192);

  position: absolute;
  top: 25%;
  left: 23%;
  font-size: 25px;
  color: rgb(255, 38, 0);
  line-height: 120px;
  text-align: center;
}
.delete {
  display: none;
}
.delete-icon {
  font-size: 30px;
  position: absolute;
  right: -10px;
  top: -10px;
}
.text1 {
  width: 400px;
  height: 35px;
  line-height: 35px;
  font-size: 17px;
}
.content-right {
  margin-left: 70px;
}
.detail-content {
  display: flex;
}
.img2 {
  width: 180px;
  height: 230px;
  margin-left: 80px;
}
.img1 {
  width: 150px;
  height: 200px;
  margin-top: 30px;
}
.img1-1 {
  width: 150px;
  height: 200px;
  margin-top: 30px;
  opacity: 0.3;
}
.total1 {
  width: 90%;
  height: 600px;
  /* background-color: cadetblue; */
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.one {
  width: 19%;
  height: 270px;
  margin-top: 30px;
  text-align: center;
  /* background-color: darkcyan; */
  position: relative;
  margin-left: 80px;
}
.one:hover {
  transform: scale(1.1);
  transition: linear;
  box-shadow: 0px 0px 10px gainsboro;
}
.touxiangdiv {
  height: 260px;
}
.touxiang {
  position: relative;
  top: 5%;
  left: 35%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: rgb(235, 235, 235);
  /* background: url(../../static/img/02.jpg)no-repeat 4px 5px; */
}
/* -----------图片上传----------- */
.touxiang i {
  position: relative;
  top: -10px;
  left: -15px;
}
.touxiang >>> .el-icon-camera-solid {
  font-size: 45px;
  color: #8d8585;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  /* border: 1px dashed #d9d9d9; */
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.from-item {
  position: relative;
  left: -5%;
}
</style>